<template>
	<div>
		<input class="btn-xs btn-info active" v-if="$store.state.user.privilegeLevel >= 10" @click="changeShowState('showInfo'),getInfo()" type="button" value="纳新信息">
		<input class="btn-xs btn-info active" v-if="$store.state.user.privilegeLevel >= 10" @click="changeShowState('showTab'),getInfo()" type="button" value="纳新报表">
		<input class="btn-xs btn-info active" v-if="$store.state.user.privilegeLevel >= 10" @click="changeShowState('showSearch')" type="button" value="查询成员">
		<input class="btn-xs btn-info active" @click="logout()" type="button" value="退出账号">

		<div>
			<div v-show="showState.showInfo && ($store.state.user.privilegeLevel >= 10)" class="showDiv">
				<label v-show="userInfo.length > 0"><input class="checkMenu" type="checkbox" v-model="infoState"><span>显示详细信息</span></label>
				<label v-show="userInfo.length > 0"><input class="checkMenu" type="checkbox" v-model="infoContral"><span>开启修改信息</span></label>
				<br>
				<label v-show="userInfo.length > 0"><input class="checkMenu" type="checkbox" v-model="collegeFilter"><span>开启学院筛选</span></label>
				<label v-show="userInfo.length > 0">
					<div class="col-xs-12">
						<select class="form-control" v-model="collegeShow" :disabled="!collegeFilter">
							<option v-for="(item,index) in $store.state.colleges" :value="index">{{item}}</option>
						</select>
					</div>
				</label>
				<ul>
						<li v-for="item in userInfo">
							<info :item="item" :isActive="infoState" :isContral="infoContral" v-if="!collegeFilter||(item.college == collegeShow)"></info>
						</li>
				</ul>
			</div>
			<div v-show="showState.showTab && ($store.state.user.privilegeLevel >= 10)" class="showDiv">
					<p>总计有会员{{totalNum}}名</p>
					<p>男性会员{{totalmale}}名，占比{{(totalmale/totalNum) | numFormat}}%</p>
					<p>女性会员{{totalfemale}}名，占比{{(totalfemale/totalNum) | numFormat}}%</p>
					<h3>院系分布</h3>
					<hr>
					<p v-for="(item,index) in $store.state.colleges">{{item}}:{{collegeDis[index]}}人，占比{{(collegeDis[index]/totalNum)|numFormat}}%</p>
					<h3>部门分布</h3>
					<hr>
					<p v-for="(item,index) in $store.state.departments">{{item}}:{{departmentDis[index]}}人，占比{{departmentDis[index]/totalNum|numFormat}}%</p>
			</div>
			<div v-show="showState.showSearch && ($store.state.user.privilegeLevel >= 10)" class="showDiv">
				<search></search>
			</div>
		</div>
	</div>
</template>

<script>
	import store from '../../store/index.js'
	import search from './showPage/searchPage.vue'
	import info from '../../components/userInfo.vue'
	export default {
		data(){
			return {
				userInfo: [],
				// showInfo: true,
				// showTab: false,
				showState:{
					showInfo: true,
					showTab: false,
					showSearch: false
				},
				infoState: false,
				infoContral: false,
				collegeFilter: false,
				collegeShow: 0
			}
		},
		store,
		computed:{
			totalNum(){
				return this.userInfo.length
			},
			totalmale(){
				let count = 0
				for(const item of this.userInfo){
					if(item.sex == 0)
						count++
				}
				return count
			},
			totalfemale(){
				return this.totalNum - this.totalmale
			},
			collegeDis(){
				let res = (new Array(this.$store.state.colleges.length)).fill(0)
				for(const item of this.userInfo){
					res[item.college]++
				}
				return res
			},
			departmentDis(){
				let res = (new Array(this.$store.state.departments.length)).fill(0)
				for(const item of this.userInfo){
					res[item.department]++
				}
				return res
			}
		},
		filters: {
			showSex(val){
				if(val == 0){
					return '男'
				}else{
					return '女'
				}
			},
			numFormat(val){
				let res = parseFloat(val * 100).toFixed(2)
				return res
			}
		},
		methods:{
			getInfo(){
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					this.userInfo = JSON.parse(xhr.responseText)
				}
				xhr.open('get','/getAllUserInfo')
				xhr.send()
			},
			changeShowState(item){
				for(let key in this.showState){
					this.showState[key] = false
					if(key == item){
						this.showState[key] = true
					}
				}
				item = true
			},
			logout(){
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					this.$store.state.isLogin = false
					this.$store.state.user.account = ''
					this.$store.state.user.pw = ''
					this.$router.push('/Admin')
				}
				xhr.open('get','/logout')
				xhr.send()
			}
		},
		created() {
			this.getInfo()
		},
		components:{
			search,info
		}
	}
</script>

<style scoped="scoped">
	ul{
		list-style: none;
	}
	h3{
		text-align: left;
		
	}
.showDiv{
	margin: 10px;
	margin-bottom: 50px;
	overflow-x: scroll;
	height: calc(75vh);
}
.btn-info{
	margin-left:25px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.checkMenu{
	margin-bottom: 10px;
	margin-left: 10px;
}
</style>
